<template>
    <div class="goods-list">
     <!-- <router-link class="goods-item" v-for="(item,index) in goodslist" :key='index' to="/home/goodsinfo" tag="div">
         <img :src='item.bimageuri' alt="">
         <h1 class="title">{{item.name}}</h1>
         <div class="info">
             <p class="price">
                 <span class="now">￥{{item.hate}}</span>
                 <span class="old">￥{{item.love}}</span>
             </p>
             <p class="sell">
                 <span>热卖中</span>
                 <span>剩{{item.repost}}件</span>
             </p>
         </div>
     </router-link > -->


    <!-- 在网页中，有两种跳转方式： -->
    <!-- 方式一： 使用a链接的形式叫做标签跳转 -->
    <!-- 方式二：使用window.location.href 的形式，叫做编程式导航 -->
    <!-- 由于是跳转到详情页面，所以此处点击方法里面应该有id  对应到跳转到哪个页面，但是我们现在的接口没有提供，所以这里不传递id了。 -->
    <!-- <div class="goods-item" v-for="(item,index) in goodslist" :key='index' @click="goDetail(item.id)"> -->
     <div class="goods-item" v-for="(item,index) in goodslist" :key='index' @click="goDetail()">    
         <img :src='item.bimageuri' alt="">
         <h1 class="title">{{item.name}}</h1>
         <div class="info">
             <p class="price">
                 <span class="now">￥{{item.hate}}</span>
                 <span class="old">￥{{item.love}}</span>
             </p>
             <p class="sell">
                 <span>热卖中</span>
                 <span>剩{{item.repost}}件</span>
             </p>
         </div>
     </div>
     
    </div>

</template>

<script>
import { Toast } from "mint-ui"
export default {
    
    data(){
        return {
            goodslist:[]//存放商品列表的数组
        }
    },
    created(){
        this.getGoodsList();
    },
    methods:{
        getGoodsList(){
            this.$http
        .get("https://www.apiopen.top/satinApi?type=1&page=1")
        .then(result => {
          if (result.body.code == 200) {
            Toast("获取商品详情");
            console.log(result.body.data);
            this.goodslist = result.body.data;
          } else {
            Toast("获取加载失败......");
          }
        });
        },
        goDetail(){
            // 使用js的方式进行路由跳转
            // 注意：一定要区分this.$route 和this.$router这两个对象
            // $route：是路由参数对象，所有路由中的参数，params,query都属于它
            // $router：是路由导航对象，用它可以方便的使用js代码实现路由的前进后退，跳转到新的url地址
            console.log(this);
            // 1.传递字符串  最简单的一种方式
            // this.$router.push('/home/goodsinfo')
            // 2.传递对象 
            this.$router.push({ path: '/home/goodsinfo' })
        }
    },
}
</script>

<style scoped>
.goods-list{
    display: flex;
    flex-wrap: wrap;
    padding: 0 8px;
    justify-content: space-between;
    
}
.goods-list .goods-item{
    width: 49%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    margin: 4px 0;
    padding: 2px;
    /* 标题超过2行的话会把盒子撑大，所以下面代码是为了解决这个问题的 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height:290px;
}

.goods-list .goods-item img{
    width: 100%;
}
.goods-list .goods-item .title{
    font-size: 14px;
}
.info{
background-color: #ddd;
}
/* 解决图片下面有间距的问题，没有清除默认样式导致的 */
.info p{
    margin: 0;
    padding: 5px;
}

.info .price .now{
    color: red;
    font-weight: bold;
    font-size: 16px;
}
.info .price .old{
    text-decoration: line-through;
    font-size: 12px;
    margin-left: 10px;
}
.sell{
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}
</style>
